import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store'

// 导入一级组件
// import Layout from '@/views/layout'
// import Login from '@/views/login'
// import NotFound from '@/views/404'

// 导入二级路由
// import Home from '@/views/layout/home'
// import QA from '@/views/layout/qa'
// import Video from '@/views/layout/video'
// import User from '@/views/layout/user'
// import Search from '@/views/search'
// import SearchResult from '@/views/search/result'
// import Detail from '@/views/article'
// import Edit from '@/views/layout/user/edit'
// import Chat from '@/views/layout/user/chat'

// 导入一级的路由对应的组件
const Login = () => import('@/views/login')
const Layout = () => import('@/views/layout')
const NotFound = () => import('@/views/404')

// 导入二级的路由对应的组件
const Home = () => import('@/views/layout/home')
const QA = () => import('@/views/layout/qa')
const Video = () => import('@/views/layout/video')

// webpackChunkName 指定打包的文件名
const User = () => import(/* webpackChunkName: "user" */ '@/views/layout/user')
const Edit = () =>
  import(/* webpackChunkName: "user" */ '@/views/layout/user/edit')
const Chat = () =>
  import(/* webpackChunkName: "user" */ '@/views/layout/user/chat')

// 导入search
const Search = () => import(/* webpackChunkName: "search" */ '@/views/search')
const SearchResult = () =>
  import(/* webpackChunkName: "search" */ '@/views/search/result')
const Detail = () => import('@/views/article')

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Layout,
    redirect: '/home',
    children: [
      {
        // path 写的是空字符串，匹配到/，还会匹配到二级的Home组件
        path: '',
        component: Home,
        meta: {
          // 首页路由对应的组件是需要被缓存起来的
          isKeepLive: true
        }
      },
      {
        path: '/qa',
        component: QA
      },
      {
        path: '/video',
        component: Video
      },
      {
        path: '/user',
        component: User
      }
    ]
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/search',
    component: Search
  },
  {
    path: '/search/result',
    component: SearchResult
  },
  {
    path: '/detail/:id',
    component: Detail
  },
  {
    path: '/user/edit',
    component: Edit
  },
  {
    path: '/user/chat',
    component: Chat
  },
  {
    path: '*',
    component: NotFound
  }
]

const router = new VueRouter({
  routes
})

// 全局的导航守卫 ==> 目标（用户没有登录，就不能访问/user这些页面）
// 步骤
// 1. 判断是否有token
// 2. 如果有token 直接放行
// 3. 如果没有token，在判断去哪
// 3.1 /home /video 等页面  直接放行
// 3.2 /user 编辑资料等页面  拦截去登录

// 需要拦截的页面(需要登录才可以访问到)
const loginURL = ['/user', '/qa', '/user/edit', 'user/chat']

router.beforeEach(function(to, from, next) {
  const token = store.state.user.token.token

  if (token) {
    next()
  } else {
    if (loginURL.some(item => to.path === item)) {
      // router.push('/login')
      router.push({
        path: '/login',
        query: {
          back: to.fullPath
        }
      })
    } else {
      next()
    }
  }
})

export default router
